<template>
	<div class="register">
		<div class="register-head">
			<img src="../assets/tao.png" alt="">
		</div>
		<div class="register-main">
			<form class="biaodan" @submit.prevent="validateSubmit">
				<input type="text" v-model="name" placeholder="请 输 入 账 号" name="name" v-validate="'required|min:4|max:8|alpha_num'">
				<span v-show="errors.has('name')" class="text-style" v-cloak> {{ errors.first('name') }} </span>
				<input type="password" v-model="password" placeholder="请 输 入 密 码" name="password" v-validate="'required|min:6|max:12|alpha_dash'" />
				<span v-show="errors.has('password')" class="text-style" v-cloak> {{ errors.first('password') }} </span>
				<!--<input type="email" v-model="email" placeholder="请 输 入 邮 箱" name="email" v-validate="'required|min:8|max:18|email'" />
				<span v-show="errors.has('email')" class="text-style" v-cloak> {{ errors.first('email') }} </span>-->
				<input type="text" v-model="phone" placeholder="请 输 入 手 机 号" name="phone" v-validate="'required|phone'" />
				<span v-show="errors.has('phone')" class="text-style" v-cloak> {{ errors.first('phone') }} </span>
				<input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma">
				<input style="background: #eee;border: solid 1px #999;  width: 120px; color: mediumorchid; float: left;" type="button" id="code" class="verification1" v-model="checkCode" /> <br>
				<div class="getNum" @click="createCode">
					<b>点击获取验证码</b> <br />
					<i>看不清,换一张</i>
				</div>
				<button type="submit">注册</button>
			</form>

		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import $ from 'jquery'
	export default {
		name: 'hello',
		data() {
			return {
				name: '',
				password: '',
				phone: '',
				checkCode: '',
				picLyanzhengma: '',

			}
		},

		methods: {
			
			validateSubmit() {

				this.$validator.validateAll().then((data) => {
					if(data) {
						var that = this;
						axios.post('/taobao/register', {
							name: that.name,
							password: that.password,
							phone: that.phone,
							time: new Date()
						}).then(function(result) {
							console.log(result);
							var res = result.data;
							if(res.error == 1) {
								alert(res.msg)
							} else {
								alert('注册成功,点击确定1s跳转至登录页面');
								setTimeout(function() {
									location.href = '#/login'
								}, 1000)
							}
						})

					}

				})
			},
			createCode() {
				code = "";
				var codeLength = 4; //验证码的长度 
				var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数 
				for(var i = 0; i < codeLength; i++) {
					//循环操作 
					var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35） 
					code += random[index]; //根据索引取得随机数加到code上 
				}
				this.checkCode = code; //把code值赋给验证码 
			},

			// 失焦验证图和密码
			checkLpicma() {
				this.picLyanzhengma.toUpperCase();
				if(this.picLyanzhengma == '') {
					alert('请输入验证码');

				} else if(this.picLyanzhengma.toUpperCase() != this.checkCode) {
					alert('验证码不正确')
					this.createCode(); //刷新验证码 
					this.picLyanzhengma = '';
				} else {
					return true;
				}
			},

		}
	}
</script>

<style scoped>
	.register {
		background: #fff;
		text-align: center;
		width: 360px;
		margin: 50px auto;
	}
	
	.register img {
		width: 80px;
	}
	
	.register-main {
		padding: 0 40px;
	}
	
	.register-main .biaodan {
		margin-top: 35px;
	}
	
	.register-main input {
		width: 100%;
		margin-top: 25px;
		border: none;
		border-bottom: solid 1px #E0DFE3;
		font-size: 14px;
		line-height: 30px;
		display: inline-block;
	}
	
	.register-main span {
		position: absolute;
		margin-top: 58px;
		left: 40%;
		color: #FF6347;
		font-size: 13px;
	}
	
	.register-main button {
		width: 100%;
		line-height: 40px;
		margin-top: 15px;
		border-radius: 30px;
		border: none;
		background: -webkit-linear-gradient(left, #ff9000, #ff7000);
		cursor: pointer;
		color: #fff;
	}
	
	.getNum {
		background: #eee;
		width: 140px;
		float: right;
		border-radius: 50%;
		margin-top: 18px;
		font-size: 14px;
		cursor: pointer;
	}
</style>